import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {observer} from 'mobx-react'
import {PullToRefresh, ListView, Modal} from 'antd-mobile';
import applyListStore from './ApplyListStore'

const operation = Modal.operation;


/**
 * 业主申请界面
 * */
@observer
class ApplyList extends Component {
    constructor(props) {
        super(props);
        this.height = document.documentElement.clientHeight;
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
    }

    componentDidMount() {
        this.height = this.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        initToken(() => {
            console.log("success");
        }, () => {
            console.log("failed");
        });
        applyListStore.onRefresh();
    }

    render() {
        const {refreshing, isLoading, onRefresh, onEndReached, ownerData, hasMore, ownerOperation} = applyListStore;
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 5,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );

        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID}
                     style={{backgroundColor: 'white'}}
                     onClick={() => operation([
                         {
                             text: <div style={{
                                 color: 'blue',
                                 textAlign: 'center'
                             }}>通过申请</div>, onPress: () => ownerOperation(1, rowData)
                         },
                         {
                             text: <div style={{
                                 color: 'red',
                                 textAlign: 'center'
                             }}>打回申请</div>, onPress: () => ownerOperation(2, rowData)
                         },
                         {
                             text: <div style={{
                                 color: 'red',
                                 textAlign: 'center'
                             }}>删除申请</div>, onPress: () => ownerOperation(3, rowData)
                         },
                         {
                             text: <div style={{
                                 textAlign: 'center'
                             }}>关闭</div>, onPress: () => console.log('关闭')
                         }
                     ])}
                >
                    <div style={{
                        height: '50px',
                        lineHeight: '50px',
                        marginLeft: '15px',
                        marginRight: '15px',
                        borderBottom: '1px solid #ddd'
                    }}>
                        <div style={{
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            maxWidth: '50%',
                            color: '#000',
                            fontSize: '16px',
                            float: 'left'
                        }}>
                            【{rowData.ownerName}】的申请信息
                        </div>
                        <div style={{
                            color: '#888',
                            float: 'right',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            maxWidth: '45%',
                        }}>
                            {rowData.lastModify}
                        </div>
                    </div>
                    <div style={{
                        display: '-webkit-box',
                        display: 'flex',
                        paddingTop: '10px',
                        paddingBottom: '10px',
                        justifyContent: 'space-between',
                    }}>
                        <table style={{borderCollapse: 'separate', borderSpacing: 10}}>
                            <colgroup>
                                <col width="100"/>
                                <col/>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td style={{float: 'right', color: '#000', fontSize: '16px',}}>业主名：
                                </td>
                                <td>{rowData.ownerName}</td>
                            </tr>
                            <tr>
                                <td style={{float: 'right', color: '#000', fontSize: '16px',}}>业主电话：
                                </td>
                                <td>{rowData.ownerMob}</td>
                            </tr>
                            <tr>
                                <td style={{float: 'right', color: '#000', fontSize: '16px',}}>楼宇信息：
                                </td>
                                <td>{rowData.roomInfo}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        };
        return (
            <div style={{
                MozUserSelect: 'none',
                OUserSelect: 'none',
                KhtmlUserSelect: 'none',
                WebkitUserSelect: 'none',
                msUserSelect: 'none',
                userSelect: 'none'
            }}>
                <ListView
                    ref={el => this.lv = el}
                    dataSource={this.dataSource.cloneWithRows(ownerData.slice())}
                    renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
                        {hasMore ? '没有更多数据' : isLoading ? '正在加载...' : '加载完成'}
                    </div>)}
                    renderRow={row}
                    renderSeparator={separator}
                    style={{
                        height: this.height,
                        border: '1px solid #ddd',
                        margin: '5px 0',
                    }}
                    pullToRefresh={<PullToRefresh
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />}
                    onEndReached={onEndReached}
                    pageSize={10}
                />
                <style>
                    {`
                        .am-modal.am-modal-operation .am-modal-content .am-modal-button {
                            color: #000;
                            text-align: left;
                            padding-left: 0px;
                        }
                    `}
                </style>
            </div>
        );
    }
}

ReactDOM.render(
    (<ApplyList/>),
    document.getElementById('root')
);